<template>
    <div>
        <div class="page-header">
            <Row>
                <Col span="5">
                    <Input  placeholder="公墓名称"  clearable style="width: 200px" />
                </Col>
                <Col span="5">
                    <Input  placeholder="公墓地址" clearable style="width: 200px" />
                </Col>
                <Col span="5">
                    <Input  placeholder="公墓编号" clearable style="width: 200px" />
                </Col>
                <Col span="4">
                    <Button type="primary" class="lyx-mr10" @click="select()">查询</Button>
                </Col>
            </Row>
        </div>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange">
                        <template slot-scope="{ row, index }" slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="report">查看年检报告</Button>
                            <Button type="primary" size="small" style="margin-left: 5px" v-if="row.state==='待审核'" @click="check(index)" >审核</Button>
                            <Button type="primary" size="small" style="margin-right: 5px" v-if="row.state==='通过'" @click="show(index)">发布</Button>
                            <Button type="primary" size="small" style="margin-right: 5px" v-if="row.state==='发布成功'"  @click="del(index)">撤回</Button>
                        </template>
                    </Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <!--                    <Button @click="handleSelectAll(true)" class="lyx-mr10">全选</Button>-->
                    <!--                    <Button @click="handleSelectAll(false)">取消</Button>-->
                </Col>
                <Col span="12">
                    <Page :total="100" show-total />
                </Col>
            </Row>
            <!--            年检报告-->
            <Modal v-model="modal1" title="年检报告详情" @on-ok="ok1" @on-cancel="cancel1" width="60">
                <div class="detail">
                    <Divider orientation="left">公墓基本信息</Divider>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">公墓名称:</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;东山公墓</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">公墓地址:</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;沈阳市大东区前进乡榆树林村</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">可建墓位数:</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;51236</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">已建墓位数:</span>
                            <span>23122</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">可容纳骨灰数:</span>
                            <span>432152</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">存放骨灰数:</span>
                            <span>12321</span>
                        </Col>
                    </Row>
                    <Divider orientation="left">公司信息</Divider>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">经营单位:</span>
                            <span>沈阳市天堂有限公司</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">通讯地址:</span>
                            <span>沈阳市大东区前进乡榆树林村</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">联系人:</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;王春秀</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">联系电话:</span>
                            <span>13820212221</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">公开范围:</span>
                            <span>全部</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">申请时间:</span>
                            <span>2019/07/01</span>
                        </Col>
                    </Row>
                    <Divider orientation="left">营业状况</Divider>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">营业收入:</span>
                            <span>4235254</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">营业支出:</span>
                            <span>123221</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">净利润:</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;4112033</span>
                        </Col>
                    </Row>
                </div>
                <div slot="footer">
                    <Button type="error" size="large"   @click="cancel1">关闭</Button>
                </div>
            </Modal>
            <!--            审核-->
            <Modal v-model="modal2" title="审核详情" @on-ok="ok2" @on-cancel="cancel2" >
                <div class="detail">
                    <Row class="p10">
                        处理意见：
                        <Col>
                            <textarea style="width: 100%" :rows="3" :cols="80"></textarea>
                        </Col>
                    </Row>
                </div>
                <div slot="footer">
                    <Button type="error" size="large"  @click="unadopt(states)">不通过</Button>
                    <Button type="primary" size="large"  @click="adopt(states)">通过</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      cemetery_name: [
        '东山公墓', '龙泉古园', '陶然陵寝', '福山公墓', '观陵山墓园'
      ],
      cemetery_address: [
        '沈阳市大东区前进乡榆树林村', '浑南龙泉森林公园', '沈阳市沈北新区清水台镇柳条河', '浑南龙泉森林公园', '沈阳市沈北新区清水台镇柳条河'
      ],
      build_count: [
        '13413', '51236', '41431', '42433', '32432'
      ],
      builded_count: [
        '12322', '21322', '12122', '3121', '12211'
      ],
      ashes_count: [
        '34324', '34134', '43413', '54131', '31433'
      ],
      ashesed_count: [
        '1321', '2122', '2121', '2312', '1231'
      ],
      company: [
        '沈阳市天堂有限公司', '沈阳市天泉有限公司', '沈阳市王府有限公司', '沈阳市XXX有限公司', '沈阳市泉园有限公司'
      ],
      address: [
        '沈阳市大东区前进乡榆树林村', '浑南龙泉森林公园', '沈阳市沈北新区清水台镇柳条河'
      ],
      contacts: [
        '张三', '李四', '王五', '陶六'
      ],
      phone: [
        '13820212221', '13820212222', '13820212223', '13820212224', '13820212225'
      ],
      open_scope: [
        '部分公开', '全部公开', '部分公开', '全部公开', '全部公开'
      ],
      apply_date: [
        '2019/01/02', '2019/01/03', '2019/01/06', '2019/01/08', '2019/01/10'
      ],
      income: [
        '4534224元', '542524元', '524542元', '543252元', '654524元'
      ],
      outcome: [
        '123121', '212111', '321211', '12321', '123121'
      ],
      profit: [
        '324132', '431312', '314324', '313411', '143124'
      ],
      modal1: false,
      modal2: false,
      columns4: [
        {
          title: '编号',
          key: 'code',
          width: '100px'
        },
        {
          title: '地址',
          key: 'address',
          width: '220px'
        },
        {
          title: '公墓名称',
          key: 'cemetery_name'
        },
        {
          title: '经营单位',
          key: 'company'
        },
        {
          title: '状态',
          key: 'state'
        },
        {
          title: '操作',
          slot: 'action',
          width: '200px'
        }
      ],
      data1: [
        {
          code: 1,
          cemetery_name: '东山公墓',
          company: '沈阳市天堂有限公司',
          address: '沈阳市大东区前进乡榆树林村',
          state: '待审核'
        },
        {
          code: 2,
          cemetery_name: '龙泉古园',
          company: '沈阳市天泉有限公司',
          address: '浑南龙泉森林公园',
          state: '待审核'
        },
        {
          code: 3,
          cemetery_name: '陶然陵寝',
          company: '沈阳市天泉有限公司',
          address: '沈阳市沈北新区清水台镇柳条河',
          state: '待审核'
        },
        {
          code: 4,
          cemetery_name: '天堂园',
          company: '天堂有限公司',
          address: '天堂路8号',
          state: '待审核'
        },
        {
          code: 5,
          cemetery_name: '福山公墓',
          company: '沈阳市泉园有限公司',
          address: '沈阳市沈北新区清水台镇柳条河',
          state: '待审核'
        },
        {
          code: 6,
          cemetery_name: '观陵山墓园',
          company: '沈阳市福泽有限公司',
          address: '天堂路8号',
          state: '待审核'
        },
        {
          code: 7,
          cemetery_name: '福山公墓',
          company: '沈阳市天泉有限公司',
          address: '沈阳市大东区前进乡榆树林村',
          state: '待审核'
        }
      ],
      states: 0
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {

    },
    ok1 () {
      this.$Message.info('Clicked ok')
      this.modal1 = false
    },
    cancel1 () {
      this.$Message.info('Clicked cancel')
      this.modal1 = false
    },
    ok2 () {
      this.$Message.info('Clicked ok')
      this.modal2 = false
    },
    cancel2 () {
      this.$Message.info('Clicked cancel')
      this.modal2 = false
    },
    unadopt (index) {
      this.data1[index].state = '未通过'
      this.modal2 = false
    },
    adopt (index) {
      this.data1[index].state = '通过'
      this.modal2 = false
    },
    check (index) {
      this.states = index
      this.modal2 = true
    },
    report () {
      this.modal1 = true
    },
    show (index) {
      this.$Message.info('发布成功')
      this.data1[index].state = '发布成功'
      this.modal2 = false
    },
    del (index) {
      this.$Message.info('撤回成功')
      this.data1[index].state = '待审核'
    }
  }
}
</script>

<style scoped>
    .p10.ivu-row{
        line-height: 25px;
    }
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
</style>
